<script lang="ts" setup>
import { message } from 'ant-design-vue';
import type { PropType } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
  },
  getVisible: {
    type: Function as PropType<() => void>,
    required: true,
  },
  item: {
    type: Object as PropType<EAPI.Index_Item>,
  },
  year: {
    type: Number as PropType<number>,
  },
});
const dateFormat = 'MM月DD日';
const formRef = ref();

const form = ref({
  examLevel: props.item?.examLevel,
  examDate: '',
  registrationStartDate: '',
  registrationDeadline: '',
  examEvent: '',
});

const rules: any = {
  examLevel: [{ required: true, message: '请输入考试名称', trigger: 'blur' }],
  examDate: [{ required: true, message: '请输入考试时间', type: 'object', trigger: 'blur' }],
};

function formatDate(isoDateString: any) {
  if (isoDateString === '') {
    return '';
  }
  const date = new Date(isoDateString);
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${month}${day}`;
}

function resetForm() {
  formRef.value.resetFields();
}

function onClose() {
  props.getVisible();
}

async function onSubmit() {
  await formRef.value.validate();
  const examItem = {
    id: props.item?.id,
    examLevel: form.value.examLevel,
    examDate: formatDate(form.value.examDate),
    registrationStartDate: formatDate(form.value.registrationStartDate),
    registrationDeadline: formatDate(form.value.registrationDeadline),
    examEvent: form.value.examEvent,
    description: props.year,
  };
  await updateExam(examItem).then(() => {
    message.success('编辑成功！');
    props.getVisible();
  });
}
</script>

<template>
  <div>
    <a-drawer
      title="修改考情信息" :width="720" :visible="props.visible" :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="考试名称" name="examLevel" prop="examLevel">
              <a-input v-model:value="form.examLevel" placeholder="请输入考试名称（例：研发工程师通用能力L1）" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="考试日期" name="examDate" prop="examDate">
              <a-date-picker v-model:value="form.examDate" style="width: 100%;" :format="dateFormat" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="报名开始时间" name="registrationStartDate">
              <a-date-picker v-model:value="form.registrationStartDate" style="width: 100%;" :format="dateFormat" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="考试截止日期" name="registrationDeadline">
              <a-date-picker v-model:value="form.registrationDeadline" style="width: 100%;" :format="dateFormat" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="考试场次" name="examEvent">
              <a-input v-model:value="form.examEvent" placeholder="请输入考试场次（如：第一场次）" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px;" @click="onClose">
          取消
        </a-button>
        <a-button style="margin-right: 8px;" @click="resetForm">
          重置
        </a-button>
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
